<template>
	<div style="width: 100%; height: 100%; overflow: hidden">
		<div style="
				position: absolute;
				width: 50%;
				height: 0.6rem;
				left: 25%;
				top: 2%;
				cursor: pointer;
			 " @click="$router.push('./edit')"></div>
		<p id="top-p">{{ time }}</p>
		<img src="/static/images/房间管理.png" style="width: 100%; height: 100%"/>
		<div class="div-overflow">
			<p style="color: #26abb8; font-size: 16px; font-weight: bold">
				房间统计
			</p>
            <el-scrollbar style="height:calc( 100% - 30px );">
                <div
                    class="left-item"
                    v-for="(item, index) in roomData"
                    :key="index"
                >
                    <div class="item-left f-16">
                        {{ item.regionName  }}
                    </div>
                    <div class="item-right">
                        <div class="right-top">
                            <div>
                                <img src="/static/images/humidity@3x.png" />
                                <p>{{ (( yund(item).humidityValue || 0) / 100).toFixed(2)}}%</p>
                                <p>湿度</p>
                            </div>
                            <div>
                                <img src="/static/images/temperature@3x.png" />
                                <p>{{ ((yund(item).temperatureValue || 0) / 100).toFixed(2)}}℃</p>
                                <p>温度</p>
                            </div>
                            <div>
                                <img src="/static/images/barometric pressure@3x.png" />
                                <p>{{((yund(item).pressureValue||0) / 1000).toFixed(2) }}KPa</p>
                                <p>大气压</p>
                            </div>
                        </div>
                        <!-- 安全 故障 报警 -->
                        <div class="right-bottom">
                            <span :class=" line.deviceStatus == 0 ? 'security': line.deviceStatus == 2? 'warning': line.deviceStatus == 3?'error':''" v-for="(line, index) in item.lineStatusData" v-if="line.fkEquipmentTypeId=='weiyu.circuit_breaker'" :key="index">
                                回路{{ line.line }}:{{ line.deviceStatus | deviceStatusFilter }}
                            </span>
                        </div>
                    </div>
                </div>
            </el-scrollbar>
		</div>
		<div class="div-overflow" style="right: 0">
			<p style="color: #26abb8;font-size: 0.2rem;font-weight: bold;text-align: right;">
				数据统计
			</p>
			<div id="chatEvent" class="right-item" style="height: 35%"></div>
			<div class="right-item" style="display: flex;flex-direction: column;height: 53%;color: white;">
				<div
					v-for="(item, index) in roomData" :key="index" style="margin-top: 10px;margin-left: 5%;width: 90%;display: inline-flex;justify-content: space-between;">
					<p class="f-14" style="margin-top: 0.1rem; width: 30%">
						<span class="error">故障 {{ item.failuresNumber }}</span>
					</p>
					<p style="font-size:.20rem; width: 40%; text-align: center;">{{item.regionName}}</p>
					<p class="f-14" style="text-align: right;margin-top: 0.1rem;width: 30%;">
						<span class="warning">报警 {{ item.alarmsNumber }}</span>
					</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { getVisualizationRoomData,getVisualizationStatisticalData } from '@/api/data'
export default {
	data() {
		return {
            roomData: [],
            rightData:{},
			tableData: []
		}
    },
    computed:{
        time:function(){
            return new Date().toLocaleString();
        }
    },
	methods: {
		//加载第一张图
		loadChart1() {
			var dataArr = [
				{
					name: '报警',
					value: this.rightData.alarmsNumber,
				},
				{
					name: '故障',
					value: this.rightData.failuresNumber
				},
				{
					name: '安全',
					value: this.rightData.normalNumber
				},
			]

			var legendData = []
			var emptyData = []
			dataArr.forEach((el, index) => {
				legendData.push(el.name)
				emptyData.push({
					name: '',
					value: 0,
				})
            })

			var seriesData = dataArr.concat(emptyData)

			seriesData.forEach(v => {
				v.label = {
					normal: {
						show: true,
						formatter: '{c}'
					},
				};
				v.labelLine = {
					normal: {
						show: v.value > 0
					},
				};
			});
			let option = {
				color: ["#FEC30E", "#FF3E3D", "#1AD4AF"],
				legend: {
					icon: "rect",
					top: "10%",
					y: "center",
					data: legendData,
					textStyle: {
						"color": "#fff"
					}
				},
				series: [{
					type: "pie",
					radius: ["30%", "120%"],
					startAngle: 0,
					center: ["50%", "25%"],
					roseType: "area",
					animation: false,
					avoidLabelOverlap: false,
					data: seriesData
				}]
			};
			let event = this.$echarts.init(document.getElementById("chatEvent"));
            event.setOption(option);
        },
        yund(item){
            let obj = item.lineStatusData.filter((v)=>v.fkEquipmentTypeId=='lumi.weather')[0];
            return obj || {};
        },
		loadData() {
			getVisualizationRoomData().then(res => {
                this.roomData = res.data;
            });
            getVisualizationStatisticalData().then(res=>{
                this.rightData = res.data;
		        this.loadChart1();
            })
		}
	},
	mounted() {
		this.loadData();
	},
}
</script>
<style scoped>
.f-14{
    font-size: .14rem;
}

#top-p {
	position: absolute;
	top: 0.1rem;
	left: 0.1rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #26abb8;
}

.div-overflow {
	width: 25%;
	height: 90%;
	overflow-x: hidden;
	overflow-y: auto;
	position: absolute;
	top: 10%;
	/* background-color:#666; */
	padding: 0 10px;
}

.right-item {
	margin-top: 0.2rem;
	width: 100%;
	display: flex;
	border-radius: 10px;
	border: 1px solid #285d9a;
	background-image: linear-gradient(to right, #0f559a, #082348);
}

.left-item {
	margin-top: 0.2rem;
	width: 100%;
	height: 2rem;
	border-radius: 10px;
	background-image: linear-gradient(to right, #082348, #0f559a);
	display: flex;
	border: 1px solid #285d9a;
}

.left-item::before,
.left-item::after {
	content: '';
	display: inline-block;
	height: 0.6rem;
	width: 0.06rem;
	position: relative;
	top: calc(50% - 0.3rem);
	background-color: #4a99f2;
}

.left-item::before {
	left: -0.03rem;
}

.left-item::after {
	right: -0.15rem;
}

.left-item .item-left {
	height: 100%;
	width: 25%;
	color: #4a99f2;
	font-weight: bold;
	font-size: 13px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.left-item .item-right {
	width: 70%;
	height: 100%;
}

.left-item .item-right .right-top,
.left-item .item-right .right-bottom {
	width: 100%;
	/* background-color: red; */
}

.left-item .item-right .right-top {
	height: 70%;
}

.left-item .item-right .right-bottom {
	height: 30%;
}

.right-bottom,
.right-top {
	display: flex;
	font-size: 0.2rem;
	flex-wrap: wrap;
	color: white;
	justify-content: space-between;
	align-items: center;
}

.right-top img {
	height: 20px;
	margin: 5px 0;
}

.right-top > div:not(:last-child) {
	margin-right: 11%;
}

.right-top > div {
	border: 1px solid #4369a7;
	border-radius: 5px;
	width: 26%;
	display: inline-block;
	margin: 10px 0;
	text-align: center;
	box-sizing: border-box;
	padding-bottom: 0.05rem;
}

.right-top > div p:nth-of-type(1) {
	font-weight: bold;
}

.right-top > div p:nth-of-type(2) {
	font-size: 0.15rem;
	color: #448ff4;
}

.right-bottom > span {
	width: 34%;
	font-size: 0.15rem;
}
.security::before {
	content: '';
	display: inline-block;
	border-radius: 50%;
	width: 0.1rem;
	height: 0.1rem;
	background-color: #21c0a1;
	margin-right: 0.1rem;
}
.warning::before {
	content: '';
	display: inline-block;
	border-radius: 50%;
	width: 0.1rem;
	height: 0.1rem;
	background-color: #fec30e;
	margin-right: 0.1rem;
}
.error::before {
	content: '';
	display: inline-block;
	border-radius: 50%;
	width: 0.1rem;
	height: 0.1rem;
	background-color: #ff3e3d;
	margin-right: 0.1rem;
}
>>> .el-table th,
>>> .el-table tr {
	background-color: transparent !important;
}

>>> .el-table::before {
	height: 0px;
}

>>> .el-table td,
>>> .el-table th.is-leaf {
	border-bottom: 0 !important;
	color: white;
}

>>> .el-table th > .cell {
	font-size: 0.2rem;
	padding: 0.1rem;
}

>>> .el-table--enable-row-hover .el-table__body tr > td {
	font-size: 0.2rem;
	padding: 0.1rem 0;
}

>>> .el-table--enable-row-hover .el-table__body tr:hover > td {
	background-color: #09264d !important;
}
</style>
